<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级菜单</title>
</head>
<style>
    .li{

        list-style: none;
        float: left;
        margin-left: 100px;
    }

    /*奶茶*/
    .naica:hover .naica2 li{
        visibility: visible;
    }
    /*奶茶*/
    .guoca:hover .guoca2 li{
        visibility: visible;
    }
    /*奶茶*/
    .coffee:hover .coffee2 li{
        visibility: visible;
    }




</style>
<body>
<ul >
    <li class="naica li">奶茶
        <ul class="naica2" style="visibility: hidden">
            <li>珍珠奶茶</li>
            <li>香草奶茶</li>
            <li>果冻奶茶</li>
        </ul>
    </li>

    <li class="guoca li">果茶
        <ul class="guoca2" style="visibility: hidden">
            <li>水果茶</li>
            <li>奶果茶</li>
            <li>冰果茶</li>
        </ul>
    </li>

    <li class="coffee li">咖啡
        <ul class="coffee2" style="visibility: hidden">
            <li>拿铁咖啡</li>
            <li>美式咖啡</li>
            <li>摩卡咖啡</li>
        </ul>
    </li>
</ul>


</body>
</html>